<template>
    <!--成绩管理 冯云威-->
    <section>

        <!--成绩管理-->
        <el-table :data="tableData" border style="width:85%">

            <el-table-column prop="studentId" label="学生学号" width="100">
            </el-table-column>
            <el-table-column prop="studentName" label="学生姓名" width="200">
            </el-table-column>
            <el-table-column prop="courseName" label="所属课程" width="200">
            </el-table-column>
            <el-table-column prop="scorePlay" label="课件点播分数" width="150">
            </el-table-column>
            <el-table-column prop="scoreOntime" label="在线时间分数" width="150">
            </el-table-column>
            <el-table-column prop="scoreTest" label="章节测试分数" width="150">
            </el-table-column>
            <el-table-column prop="scoreExam" label="课程结业考试分数" width="150">
            </el-table-column>
            <el-table-column  sortable prop="score" label="总成绩" width="150">
            </el-table-column>
            <el-table-column  label="详情" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleMore(scope.$index, scope.row)" type="text">查看</el-button>
                    <!--<el-button :plain="true" type="text" size="small" @click="">编辑</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <!--卡号信息详情界面-->
        <cardinfo ref="cardinfo"></cardinfo>

      <!--  &lt;!&ndash;分页组件 &ndash;&gt;
        <el-col :span="24" class="toolbar">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
            </el-pagination>
        </el-col>-->

      <!--  &lt;!&ndash;详情页面&ndash;&gt;
        <el-dialog title="学生成绩详情页面" v-model="scoreDetailVisible" :close-on-click-modal="false">
            <el-form label-width="100px" :model="scoreDetail" ref="scoreDetail">
                <div style="overflow: auto; width: 100%;">
                    <table class="border-table">
                        <tr>
                            <td class="spec alt">学生编号：</td>
                            <td>{{scoreDetail.studentId}}</td>
                            <td class="alt">学生姓名:</td>
                            <td>{{scoreDetail.studentName}}</td>
                            <td class="alt">课件点播分数:</td>
                            <td>{{scoreDetail.scorePlay}}</td>
                        </tr>
                        <tr>
                            <td class="spec alt">在线时间分数：</td>
                            <td>{{scoreDetail.scoreOntime}}</td>
                            <td class="alt">章节测试分数：</td>
                            <td>{{scoreDetail.scoreTest}}</td>
                            <td class="alt">课程结业考试分数：</td>
                            <td>{{scoreDetail.scoreExam}}</td>
                        </tr>
                        <tr>
                            <td class="spec alt">总成绩：</td>
                            <td>{{scoreDetail.score}}</td>
                        </tr>
                    </table>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="scoreDetailVisible = false">取消</el-button>
            </div>
        </el-dialog>
-->

    </section>
</template>

<script>
    import { getStudentScore} from '../../api/api';
    import Cardinfo from '../../components/showStuDetailScore.vue'

    export default {
        components: {
            cardinfo: Cardinfo
        },
        data() {
            return {
                tableData: [],
            }
        },
        methods: {
            getScores() {
                let para = {
                    studentId:this.tableData.studentId,
                    studentName:this.tableData.studentName,
                    courseName:this.tableData.courseName,
                    scorePlay:this.tableData.scorePlay,
                    scoreOntime:this.tableData.scoreOntime,
                    scoreTest:this.tableData.scoreTest,
                    scoreExam:this.tableData.scoreExam,
                    score:this.tableData.score
                };
                getStudentScore(para).then((res) => {
                    this.tableData = res.resData;
                });
            },

            //显示学生考试成绩详细信息界面
            handleMore:function(index,row){
              this.$refs.cardinfo.showStuDetailScore(row);
            },

        },
        mounted() {
            this.getScores();
        }

    }
</script>
<style scoped>
    .border-table {
        border-collapse: collapse;
        border: none;
        width: 100%;
    }
    .border-table td {
        border: solid #dfe8ec 1px;
        background: #fff;
        font-size:14px;
        padding: 6px 6px 6px 12px;
        color: #009966;
        line-height:28px;
    }
    td.alt {
        background: #EFF2F7;
        color:#8492A6;
    }
</style>